

<template>
    <el-menu 
    :default-active="activeIndex" 
    class="el-menu-demo" 
    mode="horizontal" 
    @select="handleSelect">
      <el-menu-item index="out">注销登录</el-menu-item>
      <el-submenu index="2">
          <template slot="title">
            <img src="~bg/logo.png" alt="" class='touxiang'>
            {{this.userName}}
            </template>
          <el-menu-item index="change">修改密码</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
      </el-submenu>
      
      
      <!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
      
</el-menu>
</template>


<script>
  import { mapState,mapMutations } from 'vuex'
  export default {
    name:'IndexHeader',
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        
      };
    },
    computed:{
        ...mapState(['userName'])
    },
    mounted() {
      //  console.log(this.userName)
      //  console.log('this.userName')
    },
    methods: {
      changePassword(){
        this.$router.push('/CMS/CMSUserChange')
      },
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
        if(key=='out'){
          this.deleteLocalStorage('token');
          this.deleteLocalStorage('currentPage');
          this.$router.push('/')
        }else if(key=='change'){
          this.changePassword();
           this.changeActive('/CMS/CMSUserChange')
        }

      },
      deleteLocalStorage (key){
        return localStorage.removeItem(key);
      },
    ...mapMutations(['changeActive'])
    }
  }
</script>

<style lang="stylus">
.el-menu--horizontal>.el-menu-item
  float right!important
.el-menu--horizontal>.el-submenu
  float right!important
  .touxiang
    width 50px
    height 50px
</style>
